
<template>
  <div>
    {{ a }}
  </div>
  <div>
    {{ $store.state.a }}
  </div>
  {{ $store.state.bCount.dCount.d }}
  <div>
    <button @click="$store.state.a++">直接加</button>
    <button @click="asyncAdd">异步加</button>
    <button @click="add">同步加</button>
    <button @click="$store.commit('bCount/dCount/add')">同步D</button>
  </div>
</template>


<script setup>
import { computed } from 'vue';
import { useStore } from './vuex';
const store = useStore("my");
const state = store.state;
const getters = store.getters;
const a = computed(() => state.a);
const c = computed(() => getters.c);
function asyncAdd() {
  store.dispatch('asyncAdd', 1).then(() => {
    console.log(1)
  })
};
function add() {
  store.commit('add', 1)
};
</script>